<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/message.css">

</head>

<body>
    <!-- 顶部导航 -->
    <div class="topnav">
        <div class="container">
            welcome to GREAT pet shop！！！
            <span>
                <a href="">168-8888-88888 </a>
                <a href="">123456789@qq.com</a>
            </span>
        </div>
    </div>
    <!-- 主导航 -->
    <header class="container cf">
        <a href="./index.html">
            <img class="logo" src="./images/logo.png">
        </a>
        <nav>
            <a href="index.html">HOME</a>
            <a href="aboutus.html">ABOUTUS</a>
            <a href="#">DETAILS</a>
            <a href="#">NEWS</a>
            <a href="message.html">OnlineMessage</a>
            <a href="contactus.html">ContactUs</a>
        </nav>
    </header>
    <!-- 横幅 -->
    <div class="banner">
        <img src="images/banner5.jpg">
    </div>
    <!-- 子导航 -->
    <div class="middle_nav">
        <div class="container">
            <a href="#">HOME</a> 
            <a href="./message.html">OnlineMessage</a>
        </div>
    </div>
    <!-- 在线留言 -->
    <section class="message">
        <div class="container">
            <h1 class="line_ball">OnlineMessage</h1>
            <div class="message_main cf">
                <div class="message_main_left fl">
                    <a href="#">Bird pets</a>
                    <a href="#">Dog pets</a>
                    <a href="#">Dog pets</a>
                    <a href="#">Pig pets</a>
                    <a href="#">snake pets</a>
                    <a href="#">fish pets</a>
                    <img src="./images/03_f0hi.jpg">
                </div>
                <div class="message_main_right fr cf">
                    <h2>You can leave your valuable comments, we will reply to you at the first time, thank you for your attention!</h2>
                    <form action="#" method="GET">
                        <P>NAME:
                            <span>*</span>
                            <br>
                            <input type="text">
                        </P>
                        <P>PHONE:
                            <span>*</span>
                            <br>
                            <input type="text">
                        </P>
                        <P>EMAIL
                            <br>
                            <input type="text">
                        </P>
                        <P>PRODUCTS
                            <span>*</span>
                            <br>
                            <input type="checkbox">&nbsp;Bird pet
                            <input type="checkbox">&nbsp;Dog pets
                            <input type="checkbox">&nbsp;Dog pets
                            <input type="checkbox">&nbsp;Pig pets
                            <input type="checkbox">&nbsp;snake pets
                            <input type="checkbox">&nbsp;fish pets
                        </P>
                        <p>CONTENT
                            <span>*</span>
                            <br>
                            <textarea cols="112" rows="10"></textarea>
                            <button type="submit">SUBMIT</button>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!-- 底部导航 -->
   <footer>
        <div class="container cf">
            <!-- 地址联系方式 -->
            <div class="footer_left fl">
                <img src="./images/logo.png">
                <p>1 Century Avenue, Pudong New Area, Shanghai, China</p>
                <p>168-8888-88888 / (021)-58791888</p>
                <p>1238596789@gmail.com</p>
            </div>
            <!-- 快速链接 -->
            <div class="footer_middle fl">
                <h2>Navigation links</h2>
                <ul class="linklist">
                    <li>
                        <a href="#">>Home</a>
                    </li>
                    <li>
                        <a href="#">>About us</a>
                    </li>
                    <li>
                        <a href="#">>Products</a>
                    </li>
                    <li>
                        <a href="#">>News</a>
                    </li>
                    <li>
                        <a href="#">>Message</a>
                    </li>
                    <li>
                        <a href="#">>Contact</a>
                    </li>
                    <li></li>
                </ul>
            </div>
            <!-- 搜索 -->
            <div class="footer_bottom fl">
                <h2>Search</h2>
                <form class="search" action="#" method="GET">
                    <input type="text" placeholder="keywords">
                    <button type="submit">Search</button>
                    <p>
                        <a href="">Follow us</a>
                    </p>
                </form>
            </div>
        </div>
        <div class="bottom_nav">
            <p>Copyright © 2020-2021,vamll.yunjunet.cn, All rights reserved ICP no.1002548. No reprint is allowed without permission/p>
        </div>
    </footer>
    <!-- 回到顶部 -->
    <div id="gotop">
        <img src="./images/回到顶部.jpeg" alt="">
    </div>
    <script src="./js/common.js"></script>
</body>

</html>